<template>
  <view class="home">
    <my-search></my-search>
    <view class="swiper">
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular indicator-active-color="#c00000">
          <swiper-item v-for="(item,index) in swiperlist" :key="index" >
            <navigator :url="'/subpkg/goods-detail/goods-detail?id='+item.goods_id" class="item">
              <image :src="item.image_src"></image>
            </navigator>
          </swiper-item>
        </swiper>
    </view>
    <view class="nav">
      <view class="nav-item" v-for="(item,index) in navlist" :key="index" @click="handlenavitem(item)">
        <image :src="item.image_src" mode=""></image>
      </view>
    </view>
    <view class="floor">
      <view class="floor-item" v-for="(item,index) in floorlist" :key="index">
        <!--  楼层标题 -->
        <view class="title">
          <image :src="item.floor_title.image_src" mode="widthFix" ></image>
        </view>
        <view class="images">
          <view class="left"   >
              <image  :src="item.product_list[0].image_src" @click="handlenav(item.product_list[0])" mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
          </view>
          <view class="right"  >
            <image :key="i" :src="i1.image_src" mode="widthFix"  @click="handlenav(i1)"  v-for="(i1,i) in item.product_list" :style="{width:i1.image_width+'rpx'}" v-if="i!==0"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getswiperdata()
    },
    data() {
      return {
        swiperlist : [],
        navlist:[],
        floorlist:[]
      };
    },
    methods:{
      async getswiperdata(){
       const {data:{message}} = await uni.$http({url:"/api/public/v1/home/swiperdata"})
       this.swiperlist = message
       const {data} = await uni.$http({url:"/api/public/v1/home/catitems"})
       this.navlist = data.message
       const {data:res} = await uni.$http({url:"/api/public/v1/home/floordata"})
       res.message.forEach(item=>{
         item.product_list.forEach(i=>{
           let str = i.navigator_url.split('/')
           str[1] = 'subpkg/goods_list'
           i.navigator_url = str.join('/')
         })
       })
       this.floorlist = res.message
      },
      // 跳转到分类
      handlenavitem(item){
        if(item.name == "分类"){
          uni.switchTab({
            url:"/pages/cate/cate"
          })
         }else{
           uni.showToast({
             title:"开发中...",
             icon:"none"
           })
         }
      },
      // 通过楼层跳转
      handlenav(item){
        uni.navigateTo({
          url:item.navigator_url
        })
      }
    }
  }
</script>

<style lang="scss">
  .swiper{
    swiper-item{
      height: 330rpx;
      .item{
        display: block;
        height: 100%;
        width: 100%;
        image{
          width: 100%;
          height: 100%;
        }
      }
      
    }
  }
  .nav{
    display: flex;
    width: 100%;
    text-align: center;
    .nav-item{
      flex: 1;
      image{
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
  .title{
    margin-top: 20rpx;
    image{
      width: 100vw;
    }
  }
  .floor-item{
    width: 100vw;
    height: 300rpx;
    padding-bottom: 80rpx;
    // margin-bottom: 100rpx;
  }
  .images{
    padding: 0rpx 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .right {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }
</style>
